/**
 * Basic CSS styles for the Content management system
 * @author Shengzhi Cheung
 * @email shengzhizhang@gmail.com
 * @since 1.0
 */

/*Reset*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, input, textarea, p, th, td { margin:0; padding:0; } 
table { border-collapse:collapse; border-spacing:0; } 
fieldset, img { border:0; } 
caption, em, strong, th { font-style:normal; font-weight:normal; } 
ol, ul { list-style:none; } 
caption, th { text-align:left; } 
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal; } 
textarea { resize:none; }

body { font:12px/1.5 "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; color:#333; word-wrap:break-word; word-break:break-all; } 
a { color:#036; text-decoration:none; }
a:hover { color:#036; text-decoration:underline; }
a:focus { outline:none; -moz-outline:none; } 
.hidden { display:none!important; } 

/*Animations*/
#header a,
.nav a,
.btn-default,
a i { -moz-transition:all .2s linear; -webkit-transition:all .2s linear; -o-transition:all .2s linear; }

/*Clear*/
.clearfix:after,
.form .row:after { content:"\0020"; display:block; height:0; clear:both; visibility:hidden; } 
.clearfix,
.form .row { *zoom:1; }

/*Import images*/
.nav li a { background:url(bgimg/ico_bg.png) no-repeat; }
.ico-dashboard,
.ico-settings,
.ico-site,
.ico-post,
.ico-comment,
.ico-product,
.ico-links { background:url(bgimg/ico_nav.png) no-repeat; }

/*Public styles*/
	/*Icons*/
    .ico-dashboard { background-position:0 0; }
    .ico-settings { background-position:-36px 0; }
    .ico-site { background-position:-72px 0; }
    .ico-post { background-position:-108px 0; }
    .ico-comment { background-position:-144px 0; }
    .ico-product { background-position:-180px 0; }
    .ico-links { background-position:-216px 0; }
    .nav li a:hover .ico-dashboard,
    .nav .active a .ico-dashboard { background-position:0 -37px; }
    .nav li a:hover .ico-settings,
    .nav .active a .ico-settings { background-position:-36px -37px; }
    .nav li a:hover .ico-site,
    .nav .active a .ico-site { background-position:-72px -37px; }
    .nav li a:hover .ico-post,
    .nav .active a .ico-post { background-position:-108px -37px; }
    .nav li a:hover .ico-comment,
    .nav .active a .ico-comment { background-position:-144px -37px; }
    .nav li a:hover .ico-product,
    .nav .active a .ico-product { background-position:-180px -37px; }
    .nav li a:hover .ico-links,
    .nav .active a .ico-links { background-position:-216px -37px; }
    /*Titles*/
    .main-tit h2 { font-size:18px; text-shadow:0 1px 0 rgba(255, 255, 255, 1); }
    .main-tit span { color:#036; }
    .main-tit a { float:right; margin-left:10px; _display:inline; }
    /*Buttons*/
    .btn-default { display:inline-block; height:25px; line-height:25px; padding:0 20px; border:1px solid #ccc; text-align:center; background:#eee; background-image:-moz-linear-gradient(#f8f8f8, #e9e9e9); background-image:-webkit-linear-gradient(#f8f8f8, #e9e9e9); background-image:-o-linear-gradient(#f8f8f8, #e9e9e9); font-size:14px; color:#333; border-radius:3px; box-shadow:0 0 3px rgba(0, 0, 0, .1); text-shadow:0 1px 0 rgba(255, 255, 255, 1); }
    .btn-default:hover { background:#f8f8f8; background-image:-moz-linear-gradient(#fff, #F3F3F3); background-image:-webkit-linear-gradient(#fff, #F3F3F3); background-image:-o-linear-gradient(#fff, #F3F3F3); box-shadow:0 0 6px rgba(0, 0, 0, .3); color:#000; text-decoration:none; }
    .btn-light { background:#C6EFF8; background-image:-moz-linear-gradient(#DDF9FF, #B6E9F2); background-image:-webkit-linear-gradient(#DDF9FF, #B6E9F2); background-image:-o-linear-gradient(#DDF9FF, #B6E9F2); color:#0D5858; border:1px solid #8AD1D1; box-shadow:0 0 3px rgba(0, 97, 97, .2); }
    .btn-light:hover { background:#D2F4FB; background-image:-moz-linear-gradient(#EDFCFF, #C6F1F9); background-image:-webkit-linear-gradient(#EDFCFF, #C6F1F9); background-image:-o-linear-gradient(#EDFCFF, #C6F1F9); color:#185f6e; box-shadow:0 0 6px rgba(0, 97, 97, .5); }
    /*Tips*/
	.note { background:#fffff0; border:1px solid #ebd89f; padding:10px; margin:10px 0; }
    
/*Layout*/
html { overflow-y:hidden; }
html,
body { background:#F5F5F5; }
#aside { position:relative; float:right; width:250px; margin-right:-250px; background:url(bgimg/aside_bg.png); overflow:auto; overflow-x:hidden; }
.main { float:right; width:100%; }

/*Header*/
#header { height:60px; background:#E2E2E2; background-image:-moz-linear-gradient(#F0F0F0, #D8D8D8); background-image:-webkit-linear-gradient(#F0F0F0, #D8D8D8); background-image:-o-linear-gradient(#F0F0F0, #D8D8D8); box-shadow:inset 0 -1px 0 #ccc; }

    /*Logo*/
    .logo { float:left; width:250px; height:59px; background:#242424; background-image:-moz-linear-gradient(#303030, #191919); background-image:-webkit-linear-gradient(#303030, #191919); background-image:-o-linear-gradient(#303030, #191919); border-bottom:1px solid #121212; font-size:20px; text-transform:uppercase; text-shadow:0 1px 0 rgba(0, 0, 0, 1); }
    .logo a { display:inline-block; margin:15px 0 0 20px; color:#1BBFDF; }
    .logo a span { color:#14cccc; }
    .logo a:hover { color:#fff; text-decoration:none; }

    /*Breadcrumbs*/
    .breadcrumbs { float:left; margin:20px 0 0 30px; color:#999; font-size:14px; text-shadow:0 1px 0 rgba(255, 255, 255, 1); _display:inline; }
    .breadcrumbs i { font-style:normal; margin:0 10px; }
    .breadcrumbs a { color:#555; }
    .breadcrumbs a:hover { color:#000; }
    .breadcrumbs span { color:#000; }

    /*Login information*/
    .login-info { float:right; margin:20px 20px 0 0; color:#999; text-shadow:0 1px 0 rgba(255, 255, 255, 1); _display:inline; }
    .login-info a { color:#999; }
    .login-info a:hover { color:#333; }
    .login-info em { margin:0 8px; color:#bbb; }

/*Navigation*/
.nav li { position:relative; float:left; width:100%; background:#333; background-image:-moz-linear-gradient(#3A3A3A, #303030); background-image:-webkit-linear-gradient(#3A3A3A, #303030); background-image:-o-linear-gradient(#3A3A3A, #303030); border-top:1px solid #4E4E4E; border-bottom:1px solid #272727; font-size:13px; font-weight:bold; }
.nav .active { background:#2d2d2d; background-image:-moz-linear-gradient(#3A3A3A, #111); background-image:-webkit-linear-gradient(#3A3A3A, #111); background-image:-o-linear-gradient(#3A3A3A, #111); border-bottom:0; }
.nav li a { display:block; padding:9px 25px; color:#999; background-position:200px 14px; text-shadow:1px 1px 0 rgba(21, 21, 21, 1); }
.nav li i { float:left; width:16px; height:16px; margin-right:10px; _display:inline; }
.nav li a:hover,
.nav .active a { color:#1BBFDF; text-decoration:none; }
.nav .active a { padding-left:21px; background-position:192px -27px; *background-position:196px -27px; border-left:4px solid #0CACD4; }
    /*Submenu*/
    .nav li ul { display:none; border-top:1px solid #242424; }
    .nav li li { background:#333; }
    .nav .active ul { display:block; }
    .nav .active li { border:none; background:#333; }
    .nav li li a,
    .nav .active li a { padding:5px 25px; border-left:24px solid #242424; border-top:0; border-bottom:1px solid #242424; background-position:-14px -69px; color:#777; font-weight:normal; font-size:12px; }
    .nav li li a:hover,
    .nav .active .active a { background-position:-14px -102px; color:#1BBFDF; }
    

/*Main content*/
    .main-cont { padding:30px 30px 30px 280px; overflow:auto; overflow-x:hidden; }

/*Form*/
	.form span.required { color:#f00; }
    .form .row { padding-bottom:10px; }
    .form .el { float:left; }
    .form label { line-height:30px; font-size:12px; color:#000; }
    .form .label { display:block; }
    .form .txt { padding:5px; border:1px solid #DFDFDF; border-color:#BCBCBC #DFDFDF #DFDFDF #BCBCBC; outline:none; font-size:12px; font-family:"Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; border-radius:3px; }
    .form .txt:focus { border-color:#a8cadc; box-shadow:0 0 0 3px rgba(192, 226, 245, 0.5); }
    .form .readonly { color:#999; background-color:#f6f6f6; }
    .form .readonly:focus { border-color:#BCBCBC #DFDFDF #DFDFDF #BCBCBC; box-shadow:none; }
    .form input.error,
    .form textarea.error,
    .errorSummary { background:#FEF4EE; border:1px solid #f4b8a3; }
    .form .error:focus { background:#FEF4EE; border:1px solid #ecab94; box-shadow:0 0 0 3px rgba(235, 85, 32, 0.1); }
    .form select { padding:5px; *margin-top:4px; }
    .form .actions { margin-top:20px; }
    .form .actions a { float:left; margin-right:10px; _display:inline; }

    .tips, .tips-pass, .tips-warning { float:left; height:30px; line-height:30px; padding-left:20px; margin-left:10px; _display:inline; }
    .tips { background-position:-7px -342px; color:#EA5421; }
    .tips-pass { background-position:-7px -305px; }
    .tips-warning { background-position:-7px -379px; color:#3699FD; }

    .hint { color:#666; }
    /*Error tips*/
    .errorSummary { padding:10px; margin-bottom:10px; }
    .errorSummary li,
    .errorMessage { color:#EB5520; }

/*Post*/
.post { margin-bottom:20px; padding:30px; }
.post .title { border-bottom:1px solid #ddd; font-size:24px; text-shadow:0 1px 0 rgba(255, 255, 255, 1); box-shadow:0 1px #fff; }
.post .content { padding:10px; background:#fff; background-image:-moz-linear-gradient(#e6e6e6 0, #fff 5%, #fff 100%); background-image:-webkit-linear-gradient(#e6e6e6 0, #fff 10%, #fff 100%); background-image:-o-linear-gradient(#e6e6e6 0, #fff 10%, #fff 100%); border:1px solid #ddd; border-radius:4px; box-shadow:0 -1px 0 rgba(255, 255, 255, .6); font-size:16px; }
.post .meta { padding:10px 0; }

/*ListView*/
.item { margin-bottom:20px; }
.item .hd { position:relative; padding:10px; background:#EFEFEF; background-image:-moz-linear-gradient(#fff, #eee); background-image:-webkit-linear-gradient(#fff, #eee); background-image:-o-linear-gradient(#fff, #eee); border-radius:4px; box-shadow:0 1px 3px rgba(0, 0, 0, .4); line-height:24px; font-size:14px; z-index:1; }
.item .hd .avatar { position:relative; float:left; width:50px; height:50px; overflow:hidden; border-bottom:1px solid #fff; }
.item .hd .avatar img { border-radius:3px; }
.item .hd .avatar span { position:absolute; left:0; top:0; width:50px; height:50px; box-shadow:inset 0 3px 3px rgba(0, 0, 0, .4); z-index:1; border-radius:3px; }
.item .hd .info { margin-left:70px; }
.item .bd { margin:-7px 5px 0; padding:15px 25px 10px; line-height:31px; color:#666; background:-webkit-linear-gradient(0deg, transparent 0, transparent 19px, #F3D7D7 19px) repeat-y 0 0, -webkit-linear-gradient(transparent 0, transparent 30px, #D4E6F8 30px) repeat-y 0 38px; background-size:20px 31px, 100% 31px; background-color:#fff; border-radius:4px; box-shadow:0 1px 3px rgba(0, 0, 0, .4); }
.item .cont { font-size:14px; }

/*Comment*/
.comment .actions { float:right; }
.comment .actions a { color:#6ba8c4; }
.comment .time { color:#999; }

/*Search Form*/
.search-form { background:#eee; padding:20px; }

/*Card*/
.card { float:left; width:49%; }
.card-odd { float:right; }
